<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>万息金融-后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="/admin/css/font.css">
    <link rel="stylesheet" href="/admin/css/xadmin.css">
    <script src="/admin/js/jquery.min.js"></script>
    <script src="/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script src="/admin/js/myAjax.js"></script>
    <script src="/admin/js/common.js"></script>
    <script type="text/javascript" src="/admin/js/xadmin.js"></script>
    <script src="/admin/js/intercept.js"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="phone" placeholder="电话" autocomplete="off"
                                   class="layui-input">
                        </div>


                        <div class="layui-inline layui-show-xs-block">
                            <input type="text"  placeholder="生日时间起始" autocomplete="off" name="startTime" id="start"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" placeholder="生日时间截止" autocomplete="off" name="endTime" id="end"
                                   class="layui-input">
                        </div>

                        <div class="layui-inline layui-show-xs-block" pane="">
                            <div style=" border: 1px solid #dddada;display: flex;padding-top: 10px;">
                                <div style="position: relative; right: -10px;top: 4px;">爱好:</div>
                                <div class="layui-input-block" style="margin-left: 20px;">
                                    <input type="checkbox" name="hobby"  title="写作" >
                                    <input type="checkbox" name="hobby"  title="阅读">
                                    <input type="checkbox" name="hobby"  title="游戏">
                                </div>
                            </div>

                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table"  id="test" lay-data="{toolbar: '#insert',id:'test'}" lay-filter="bcfilt">
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</body>

<script type="text/html"  id="enable">
    {{#  if(d.enable ===1){ }}
    <div class="td-status"><span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></div>
    {{#  } else { }}
    <div class="td-status"> <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>   </div>
    {{#  }               }}
</script>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="update">启用</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="insert">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"> 新增</button>
    </div>
</script>
<script>
    layui.use(['table', 'jquery','form','laydate'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            table = layui.table
            , form = layui.form;
        //头部工具栏事件:  新增
        table.on('toolbar(bcfilt)', function (obj) {

            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '信息修改',
                        shade: 0.1,
                        area: ['1000px', '500px'],
                        type: 2,
                        content: './userAdd.html',
                    })
                    break;
            }
            ;
        });
        laydate.render({
            elem: '#start' //指定元素
        });
        laydate.render({
            elem: '#end' //指定元素
        });
        table.on('edit(bcfilt)',
            function(obj) {                //obj是编辑完成之后的元素
            laydate.render(obj);
           console.log(obj);
           //obj中有field,value,data,分别表示为：当前域的属性名,当前域的值,当前行的所有数据.
                let data={};
                data.id=obj.data.id;
                if(obj.data.phone!=null){
                    data.phone=obj.data.phone;
                }
                if(obj.data.address!=null){
                    data.address=obj.data.address;
                }
                if(obj.data.birthday!=null){
                    data.birthday=obj.data.birthday;
                }
                if(obj.data.email!=null){
                    data.email=obj.data.email;
                }
                if(obj.data.remark!=null){
                    data.remark=obj.data.remark;
                }
                let res=myAjax(ipAddress()+"/user/u",data,"put")
                if(res.count==1){
                    layer.msg("同步成功");
                }else{
                    layer.msg("同步失败");
                }
            });
        table.render({
            elem: '#test'
            , page: true
            , url: ipAddress()+"/user/g"
            , method: 'get'
            , text: '没有数据'
            , toolbar: '#insert'
            ,headers:{
                'Authorization':localStorage.getItem("Authorization")
            }
            , cols: [[
                 {field: 'username', minWidth: 100, title: '用户名'}
                , {field: 'phone', edit:true,minWidth: 100, title: '电话'}
                , {field: 'sex', minWidth: 100, title: '性别',templet: function (d) {return d.sex==1?'男':'女';}}
                , {field: 'address',edit:true, minWidth: 100, title: '地址'}
                , {field: 'birthday',edit:true, minWidth: 100, title: '生日'}
                , {field: 'hobby', minWidth: 100, title: '爱好'}
                , {field: 'email', edit:true,minWidth: 100, title: '邮箱'}
                , {field: 'createTime', minWidth: 100, title: '创建时间'}
                , {field: 'updateTime', sort: true, title: '修改时间'}
                , {field: 'remark',edit:true,event:'showContent', title: '批注'}
                , {field: 'enable',title:'状态',templet:'#enable'}
                , {fixed: 'right', width: 160, align: 'center', toolbar: '#operation', title: '操作'}
            ]]
        });


        //单元格工具事件：启用  删除
        table.on('tool(bcfilt)', function (obj) {
            var data = obj.data; //获得当前行数据 layui-laypage-count
            switch (obj.event) {
                case 'delete':
                    layer.confirm('确认要删除吗？', function (index) {
                        let indx = table.cache.test.length;
                        //发异步删除数据
                        let res = myAjax(ipAddress()+'/user/d/'+data.id, {}, "delete");
                        let pg=$(".layui-laypage-curr").children().eq(1).text();
                        if (res.count == 1) {
                            if (indx == 1) {
                                table.reload('test', {page: {curr: pg-1}})
                            } else {
                                table.reload('test', {})
                            }
                            layer.msg('已删除!', {icon: 1, time: 1000});
                        } else {
                            layer.msg('删除失败!', {icon: 1, time: 1000});
                        }
                    });
                    break;
                case 'update':
                    if(data.enable==1){
                        layer.confirm('确认要禁用吗？', function (index) {
                          let res= myAjax(ipAddress()+'/user/enable/'+data.id,'get');
                          if(res.count==1){
                              table.reload('test', {});
                              layer.msg('已禁用!', {icon: 1, time: 1000});
                          }
                        });
                    }else{
                        layer.confirm('确认要启用吗？', function (index) {
                            let res= myAjax(ipAddress()+'/user/enable/'+data.id,{},'get');
                            if(res.count==1){
                                table.reload('test', {});
                                layer.msg('已启用!', {icon: 1, time: 1000});
                            }
                        });
                    }
                    break;
            };});


        form.on('submit(sreach)',
            function (data) {
                let arr = [];
                $('input[type=checkbox][name=hobby]:checked').each(function () {
                    arr.push($(this).attr("title"));
                });
                //arr.toLocaleString()将数组转换为字符串
                data.field.hobby = arr.toLocaleString();
                table.reload('test',{
                    where:data.field
                    ,page:true
                })

                return false;
            })


    })
</script>
</html>